<template>
    <view class="about_page">
        <nav-bar title="关于我们" type="transparentFixed" transparentFixedFontColor="#FFF"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="about_bg_box" :style="{backgroundImage: 'url(' + base.aboutBgImg + ')', paddingTop: statusBarHeight + 'px'}">
            <view class="logo">
                <image :src="aboubUs.logo" mode="aspectFit"></image>
            </view>
            <view class="platform_name">{{ base.platformName || "" }}</view>
            <!-- #ifdef APP-PLUS -->
            <view class="version_name">{{ version }}</view>
            <!-- #endif -->
        </view>
        <view class="tab_list_box">
            <view class="tab_list" @click="onJump">
                <view class="tab_left">
                    <view class="name">品牌介绍</view>
                    <view class="description">{{ aboubUs.introduction || "" }}</view>
                </view>
                <view class="arrow"></view>
            </view>
            <view class="tab_list" @click="onCall(config.serverPhone)">
                <view class="tab_left">
                    <view class="name">客服电话</view>
                    <view class="description">{{ config.serverPhone || "" }}</view>
                </view>
                <view class="arrow"></view>
            </view>
            <view class="tab_list" @click="onCopy(aboubUs.officialAddress)">
                <view class="tab_left">
                    <view class="name">官网地址</view>
                    <view class="description">{{ aboubUs.officialAddress || "" }}</view>
                </view>
                <!-- #ifndef H5 -->
                <view class="copy">点击复制</view>
                <!-- #endif -->
            </view>
            <view class="tab_list" @click="onCopy(aboubUs.officialEmail)">
                <view class="tab_left">
                    <view class="name">联系邮箱</view>
                    <view class="description">{{ aboubUs.officialEmail || "" }}</view>
                </view>
                <!-- #ifndef H5 -->
                <view class="copy">点击复制</view>
                <!-- #endif -->
            </view>
        </view>
    </view>
</template>
<script>
    // #ifdef APP-PLUS
    import { getCurrentNo } from '@/plugins/APPUpdate';
    // #endif
    export default {
        data() {
            return {
                aboubUs: {
                    introduction: ''
                },
                config: {},
                base: {},
                version: "",
                statusBarHeight: 0
            };
        },
        onLoad() {
            this.pageData();
            this.base = this.$base;
            //获取手机状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
            // #ifdef APP-PLUS
            getCurrentNo(res => {
            	this.version = res.versionName;
            });
            // #endif
        },
        methods: {
            //拨打电话
            onCall(phone) {
                if (phone) {
                    uni.makePhoneCall({
                        phoneNumber: phone
                    });
                }
            },
            onCopy(data) {
                // #ifndef H5
                if (data) {
                    uni.setClipboardData({
                        data: data,
                        success: function() {
                            uni.showToast({
                                title: "复制成功"
                            });
                        }
                    });
                }
                // #endif
            },
            pageData() {
                this.$http.get('api/open/v1/conf').then(res => {
                    this.aboubUs = res.aboubUs;
                    this.config = res;
                });
            },
            onJump(){
                uni.navigateTo({
                    url: "/pagesMy/my/aboutIntroduction"
                });
            }
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .about_page {
        background-color: #fff;
        min-height: 100vh;
        padding-bottom: 50rpx;

        .about_bg_box {
            width: 100%;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: 100% auto;
            padding-bottom: 134rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .logo {
                display: flex;
                justify-content: center;
                padding-top: 120rpx;
                image {
                    width: 180rpx;
                    height: 180rpx;
                    border-radius: 20rpx;
                }
            }

            .platform_name {
                margin-top: 24rpx;
                font-size: 36rpx;
                color: #ffffff;
            }

            .version_name {
                margin-top: 10rpx;
                font-size: 28rpx;
                color: #ffffff;
                opacity: 0.6;
            }
        }
        .tab_list_box {
            padding: 30rpx 60rpx;
            .tab_list {
                padding: 24rpx 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1rpx solid #e5e5e5;
                .tab_left {
                    display: flex;
                    flex-direction: column;
                    width: calc(100% - 130rpx);
                    .name {
                        font-size: 32rpx;
                        color: #333333;
                    }
                    .description {
                        font-size: 24rpx;
                        color: #999999;
                        margin-top: 20rpx;
                        @include toe();
                        width: 100%;
                    }
                }
                .arrow {
                    @include bis("../../static/icon/ic_to_right.png");
                    width: 12rpx;
                    height: 24rpx;
                }
                .copy {
                    font-size: 28rpx;
                    color: #333333;
                }
            }
        }
    }
</style>
